<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            padding: 30px;
            color: #fff;
            font-size: 16px;
            background: lightcoral;
        }
        
        .self {
            padding: 30px;
            background: lightpink;
        }
        
        .child {
            padding: 30px;
            background: lightsalmon;
        }
        
        .wap {
            height: 200px;
            overflow: auto;
            background: lightblue;
        }
        
        .con {
            word-break: break-all;
            line-height: 1.5em;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <!-- onwheel="update(event)" -->
    <div class="wap" id="wrap">
        <div class="con">
            及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个,及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的
            33333333 数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个,及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个，及时登记好肥的时间耗费时间返回的数据是否是的公司多个个
        </div>
    </div>
    <div id="parent" class="parent">我是父亲
        <div id="self" class="self">我是本人
            <div id="child" class="child">我是孩子</div>
        </div>
    </div>
    <!-- <div id="parent" class="parent" onclick="parentHandler(event)">我是父亲
        <div id="self" class="self" onclick="selfHandler(event)">我是本人
            <div id="child" class="child" onclick="childHandler(event)">我是孩子</div>
        </div>
    </div> -->
    <script>
        function $(id) {
            return document.querySelector(`#${id}`);
        }

        let par = $('parent');
        let self = $('self');
        let child = $('child');
        let useCapture = true;

        par.addEventListener('click', parentHandler, false);
        self.addEventListener('click', selfHandler, true);
        self.addEventListener('click', selfHandler, false);
        child.addEventListener('click', childHandler, false);

        document.addEventListener('DOMMouseScroll', update)

        function update(e) {
            // e.scrollTop = `100px`;
            console.log(e);
            // console.log('滚动：');
            if (e.preventDefault) {
                console.log('标准浏览器');
                e.preventDefault();
                // e.stopPropagation();
            } else {
                e.cancelBubble = true;
                e.returnValue = true;
            }
        }

        function parentHandler(e) {
            console.log('parent triggered');
            // console.log(e.currentTarget);
            console.log(this);
        }

        function selfHandler(e) {
            e.stopPropagation();
            console.log('self triggered');
            // console.log(e.currentTarget);
        }

        function childHandler(e) {
            console.log('child triggered');
            // console.log(e.currentTarget);
        }
    </script>
</body>

</html>